import React from 'react';
import { Card, Table } from 'antd';

// 模拟用户统计数据
const userStatData = [
  { key: '1', name: '张三', age: 32, address: '北京', registered: '2023-01-15', activeDays: 30, lastLogin: '2023-05-10' },
  { key: '2', name: '李四', age: 45, address: '上海', registered: '2023-02-20', activeDays: 45, lastLogin: '2023-05-09' },
  { key: '3', name: '王五', age: 28, address: '广州', registered: '2023-03-10', activeDays: 22, lastLogin: '2023-05-08' },
  { key: '4', name: '赵六', age: 51, address: '深圳', registered: '2023-04-05', activeDays: 18, lastLogin: '2023-05-07' },
  { key: '5', name: '钱七', age: 36, address: '杭州', registered: '2023-05-15', activeDays: 10, lastLogin: '2023-05-06' },
];

// 定义表格列
const userStatColumns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '年龄', dataIndex: 'age', key: 'age' },
  { title: '地址', dataIndex: 'address', key: 'address' },
  { title: '注册日期', dataIndex: 'registered', key: 'registered' },
  { title: '活跃天数', dataIndex: 'activeDays', key: 'activeDays' },
  { title: '最后登录', dataIndex: 'lastLogin', key: 'lastLogin' },
];

const UserStatistics: React.FC = () => {
  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>用户统计详情</h1>
      <Card variant="outlined">
        <div style={{ padding: '20px 0', display: 'flex', justifyContent: 'center' }}>
          <p style={{ fontSize: '18px', color: '#666' }}>用户活跃度统计图表</p>
        </div>
        <Table 
          columns={userStatColumns} 
          dataSource={userStatData} 
          pagination={{ pageSize: 10 }} 
          rowKey="key"
        />
      </Card>
    </div>
  );
};

export default UserStatistics;